import React, { useCallback, useEffect, useState } from 'react';
import { Button, Table, Card, Box, Search, Divider, Loading, Icon, Field, Pagination, Switch } from '@alifd/next';
import { useFusionTable, useSetState } from 'ahooks';
import { FormattedMessage, useIntl } from 'react-intl';

import styles from './index.module.scss';
import CreateDialog from '../CreateDialog';
import BrandService from '../../service';
import { useRequest } from 'ice';
import TableEmptyBlock from '@/components/TableEmptyBlock';

const { Column } = Table;

const FilterList: React.FunctionComponent = (): JSX.Element => {
  const intl = useIntl();
  const field = Field.useField([]);

  // 禁用、启用
  const { request } = useRequest(BrandService.enableStatus, {
    manual: true,
    onSuccess: () => { refresh(); },
    onError: () => { refresh(); },
  });

  const { paginationProps, tableProps, search, error, refresh } = useFusionTable(BrandService.getBrandPage, {
    field,
  });

  const [dialogState, setDialogState] = useSetState({ visible: false, row: {} as any });

  const switchStatus = useCallback((row: BrandState.BrandItem, checked: boolean) => {
    request({ id: row.id, enable: checked });
  }, [request]);

  return (
    <Card free>
      <Card.Content>
        <Box align="center" spacing={20}>
          <Search
            {...field.init('name')}
            type="primary"
            hasClear
            hasIcon={false}
            searchText={intl.formatMessage({ id: 'btn.search' })}
            onSearch={search.submit}
          />
          <Divider dashed />
        </Box>
      </Card.Content>

      <Button type="primary" iconSize="xs" className={styles.addBtn} onClick={() => setDialogState({ visible: true })}>
        <Icon type="add" />
        <FormattedMessage id="brand.add" />
      </Button>
      <Card.Content>
        <Box spacing={10}>
          <Table
            {...tableProps}
            hasBorder={false}
            emptyContent={<TableEmptyBlock error={error} onRefresh={refresh} />}
            primaryKey="id"
          >
            <Column dataIndex="sort" title="序号" width={80} align="center" />
            <Column
              dataIndex="name"
              title="品牌"
              cell={(val, i, row) => (
                <div className={styles.brandName} style={{ opacity: row.enable ? 1 : 0.6 }}>
                  <img
                    className={styles.logo}
                    src={row.logo}
                    alt="logo"
                  />
                  <div>
                    <span className={styles.title}>{row.name}</span>
                    {!row.enable ? (
                      <span className={styles.invalid}>{`（${intl.formatMessage({ id: 'status.invalid' })}）`}</span>
                    ) : null}
                  </div>
                </div>
              )}
            />
            {/* <Column
              dataIndex="subCount"
              title="商品数量"
            /> */}
            <Column
              dataIndex="createTime"
              title="创建时间"
              cell={(val) => intl.formatDate(val, { hourCycle: 'h24', dateStyle: 'short', timeStyle: 'short' })}
            />
            <Column
              dataIndex="enable"
              title="操作"
              align="center"
              cell={(enable, i, row) => (
                <Box direction="row" spacing={10} justify="center" >
                  <Button type="primary" text onClick={() => setDialogState({ visible: true, row })}>编辑</Button>
                  <Button type="primary" text onClick={() => switchStatus(row, !enable)}>{enable ? '禁用' : '启用'}</Button>
                </Box>
              )}
            />
          </Table>
          <Pagination
            style={{ textAlign: 'right' }}
            shape="arrow-only"
            totalRender={(total) => (
              <FormattedMessage
                id="page.total"
                tagName="div"
                values={{ total }}
              />
            )}
            {...paginationProps}
          />
        </Box>
      </Card.Content>
      <CreateDialog
        visible={dialogState.visible}
        row={dialogState.row}
        onRefresh={refresh}
        onClose={() => setDialogState({ visible: false, row: {} })}
      />
    </Card>
  );
};

export default FilterList;
